<template>
  <div>
    <div style="margin-bottom: 10px;">
      <div style="display:inline-block">
        <date-picker-rang v-model="selectTime"></date-picker-rang>
      </div>

      <div style="display:inline-block; margin-left: 20px;">
        <el-input size="mini"
                  @keyup.enter.native="handleIconClick"
                  v-model="pagination.params.searchValue"
                  placeholder="工号/姓名"
                  clearable>
        </el-input>
      </div>
      <div style="display:inline-block; margin-left: 20px">
        <el-button type="primary"
                   @click="handleNodeClick">查询</el-button>
      </div>
      <div style="display:inline-block; margin-left: 20px;">
        <el-button type="primary"
                   @click="exportToExcel">导出excel</el-button>
      </div>
    </div>
    <!-- <div style="overflow: hidden">
            <div style="float:left; width: 30%">
                <el-date-picker
                    v-model="selectTime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                >
                </el-date-picker>
            </div>
            <div style="float:right; width: 30%">
                <div style="float: left; width:70%">
                    <el-input
                        @keyup.enter.native="handleNodeClick"
                        v-model="pagination.params.searchValue"
                        placeholder="座席姓名/工号"
                    >
                    </el-input>
                </div>
                <div style="float: left; width:30%">
                    <el-button @click="handleNodeClick">查询</el-button>
                </div>
            </div>
        </div> -->

    <dd-table height="calc(100vh - 200px)"
              :data="tableData"
              :config="config"
              border
              :loading="loading"
              @filter-change="filterHandler"
              :current-page="pagination.currentPage"
              :total="pagination.total"
              @current-change="changePage"
              :page-size="pagination.pageSize"
              @size-change="handleSizeChange">
    </dd-table>
  </div>
</template>
<script>
import commonApi from '@/api/common.js'
import { Notification } from 'element-ui'
// 客服中心满意度明细表
export default {
  data () {
    return {
      tableData: [],
      loading: false,
      config: [
        {
          label: '序号',
          prop: 'indexnum',
          width: '60'
        },
        {
          label: '渠道',
          prop: 'channel',
          'column-key': 'group',
          'show-overflow-tooltip': true,
          filters: []
        },
        {
          label: '日期',
          prop: 'ldate',
          'show-overflow-tooltip': true
        },
        {
          label: '录音号',
          prop: 'callID',
          'show-overflow-tooltip': true
        },
        {
          label: '来电号码',
          prop: 'callerNo',
          'show-overflow-tooltip': true
        },
        {
          label: '通话开始时间',
          prop: 'beginTime',
          'show-overflow-tooltip': true
        },
        {
          label: '通话结束时间',
          prop: 'endTime',
          'show-overflow-tooltip': true
        },
        {
          label: '通话时长',
          prop: 'callDuration',
          'show-overflow-tooltip': true
        },
        {
          label: '工号',
          prop: 'agentId',
          'show-overflow-tooltip': true
        },
        {
          label: '坐席姓名',
          prop: 'agentName',
          'show-overflow-tooltip': true
        },
        {
          label: '未评价',
          prop: 'notEval',
          'show-overflow-tooltip': true
        },
        {
          label: '非常满意',
          prop: 'verySatis',
          'show-overflow-tooltip': true
        },
        {
          label: '满意',
          prop: 'satis',
          'show-overflow-tooltip': true
        },
        {
          label: '一般',
          prop: 'common',
          'show-overflow-tooltip': true
        },
        {
          label: '业务不满意',
          prop: 'busiDisatis',
          'show-overflow-tooltip': true
        },
        {
          label: '服务不满意',
          prop: 'servDisatis',
          'show-overflow-tooltip': true
        }
      ],
      selectTime: ['', ''],
      pagination: {
        currentPage: 1,
        total: 0,
        pageSize: 20,
        isExport: '0',
        params: {
          searchValue: '',
          selectTime: ['', ''],
          group: []
        }
      }
    }
  },
  mounted () {
    this.getTableData()
  },
  methods: {
    // 导出excel表
    exportToExcel () {
      this.pagination.isExport = '1'
      let tHeader = []
      let filterVal = []
      for (let item of this.config) {
        filterVal.push(item.prop)
        tHeader.push(item.label)
      }

      commonApi
        .getCustomCenterSatisfied(this.pagination)
        .then(response => {
          if (response.retcode === '0') {
            require.ensure([], () => {
              const {
                export_json_to_excel
              } = require('@/utils/vendor/Export2Excel.js')

              const list = response.data.info
              const data = this.formatJson(filterVal, list)
              export_json_to_excel(
                tHeader,
                data,
                '客服中心满意度明细表'
              )
            })
          } else {
            Notification.error('数据返回失败')
          }
        })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    filterHandler (val) {
      this.pagination.params.group = val['group']
      this.getTableData()
    },
    handleNodeClick () {
      this.getTableData()
    },
    // 切换页码
    changePage (val) {
      this.pagination.currentPage = val
      this.getTableData()
    },
    // 可以调整每页条数
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.getTableData()
    },
    // 获取数据表
    getTableData () {
      // 参数有待确认
      this.loading = true
      this.pagination.isExport = '0'
      this.pagination.params.selectTime[0] =
        this.selectTime[0] !== ''
          ? this.formmatDate(this.selectTime[0], 'yyyy-MM-dd')
          : ''
      this.pagination.params.selectTime[1] =
        this.selectTime[1] !== ''
          ? this.formmatDate(this.selectTime[1], 'yyyy-MM-dd')
          : ''
      commonApi
        .getCustomCenterSatisfied(this.pagination)
        .then(response => {
          this.loading = false
          if (response.retcode === '0') {
            this.tableData = response.data.info
            this.pagination.total = response.data.total
            this.config[1].filters = response.data.filterList
          } else {
            Notification.error('数据返回失败')
          }
        })
    }
  }
}
</script>
<style scoped>
.left {
  float: left;
  width: 20%;
  border: 1px solid #1f92ef;
}

.right {
  float: left;
  width: 79%;
  border: 1px solid #1f92ef;
}
</style>
